In SciChart's WPF Charts, animations can be applied to Chart RenderableSeries. There are four animation types provided out-of-the-box, which can be applied to our WPF charts: FadeAnimation, WaveAnimation, SweepAnimation, ScaleAnimation.

All types related to WPF Chart animations are located in the SciChart.Charting.Visuals.RenderableSeries.Animations namespace.

Setting an Animation

An animation can be applied to a RenderableSeries by setting the SeriesAnimation property on the RenderableSeries to an instance of the desired animation type:

Declaring an Animation in XAML

<!-- Where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartSurface.RenderableSeries>
    <s:FastBandRenderableSeries>
        <s:FastBandRenderableSeries.SeriesAnimation>
            <s:WaveAnimation />
        </s:FastBandRenderableSeries.SeriesAnimation>
    </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>

 Setting an Animation in Code 

using SciChart.Charting.Visuals.RenderableSeries.Animations;

 sciChart.RenderableSeries.Add(new FastBandRenderableSeries { SeriesAnimation = new WaveAnimation() });

Controlling Animations

Series animations start automatically on SciChartSurface.Loaded event. Alternatively they can be controlled manually by calling StartAnimation() and StopAnimation() methods.

It is also possible to set up a delay on an animation via the the AnimationDelay property and change its execution time via the Duration property.

By default, an animation runs for 3 seconds and starts immediately. The EasingFunction property allows to alter standard behavior of the animation by applying a mathematical formula to it. There are several predefined EasingFunctions available in WPF. Please have a look at the Easing Functions Documentation.

Animations Public API

Besides the StartAnimation() and StopAnimation() methods mentioned above, the Animations API also exposes three events, AnimationStarted, AnimationEnded and CurrentProgressChanged. The IsRunning property can be used to check whether an animation is currently running on a RenderableSeries.

The Storyboard property allows to declare a Storyboard explicitly which will be used to animate a series.

Declaring a Storyboard

<s:SciChartSurface.RenderableSeries>
    <s:FastBandRenderableSeries x:Name="bandSeries" Fill="#33279B27"
                                FillY1="#33FF1919"
                                Stroke="#FFFF1919"
                                StrokeY1="#FF279B27">
        <s:FastBandRenderableSeries.SeriesAnimation>
            <animations:WaveAnimation PointDurationFraction="0.2">
                <Storyboard BeginTime="0:0:1" Duration="0:0:1" TargetProperty="CurrentProgress">
                    <DoubleAnimation From="0" To="1"/>
                </Storyboard>
            </animations:WaveAnimation>
        </s:FastBandRenderableSeries.SeriesAnimation>
    </s:FastBandRenderableSeries>
</s:SciChartSurface.RenderableSeries>